CSS 简介和历史
1. 什么是 CSS？
CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括SVG、XHTML等）文档外观和格式的样式表语言。CSS控制网页的布局、颜色、字体、间距等视觉元素，使得网页设计更加灵活和美观。
1.1 CSS 的作用
- 分离内容与表现：CSS 允许开发者将网页的内容（HTML）与表现（样式）分离，使得代码更易于维护和扩展。
- 提高开发效率：通过定义样式规则，开发者可以快速应用相同的样式到多个元素，减少重复代码。
- 增强用户体验：CSS 使得网页设计更加美观，提升用户体验。
2. CSS 的历史
2.1 早期网页设计
在 CSS 出现之前，网页设计主要依赖于 HTML 的属性来控制样式。例如，使用 <font> 标签来设置字体颜色和大小。这种方式导致代码冗长且难以维护。
2.2 CSS 的诞生
1994年，Håkon Wium Lie 提出了 CSS 的概念，旨在解决网页样式与内容分离的问题。1996年，CSS Level 1 成为 W3C 的推荐标准。
2.3 CSS 的发展
- CSS Level 1 (1996)：基本样式属性，如字体、颜色、边距等。
- CSS Level 2 (1998)：增加了定位、浮动、盒模型等高级特性。
- CSS Level 3 (2005至今)：模块化发展，引入了更多高级特性，如动画、过渡、Flexbox、Grid 等。
3. CSS 的基本语法
CSS 由一系列的规则组成，每个规则由选择器和声明块组成。
3.1 选择器
选择器用于指定要应用样式的 HTML 元素。
/* 选择所有 <p> 元素 */
p {
color: red;
}
3.2 声明块
声明块包含一个或多个声明，每个声明由属性和值组成。
p {
color: red; /* 声明1 */
font-size: 16px; /* 声明2 */
}
3.3 注释
CSS 中的注释用于解释代码，不会被浏览器解析。
/* 这是一个注释 */
p {
color: red; /* 这也是一个注释 */
}
4. 实践练习
4.1 创建一个简单的网页
- 创建一个 HTML 文件
index.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS 简介</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>欢迎来到 CSS 的世界</h1>
<p>这是一个使用 CSS 样式化的段落。</p>
</body>
</html>
- 创建一个 CSS 文件
styles.css：
/* 设置标题样式 */
h1 {
color: blue;
text-align: center;
}
/* 设置段落样式 */
p {
color: green;
font-size: 18px;
}
- 在浏览器中打开
index.html，查看效果。
4.2 修改样式
尝试修改 styles.css 中的颜色和字体大小，观察网页的变化。
h1 {
color: purple; /* 修改标题颜色 */
}
p {
font-size: 20px; /* 修改段落字体大小 */
}
5. 总结
通过本教程，你已经了解了 CSS 的基本概念、历史发展以及如何编写简单的 CSS 规则。CSS 是网页设计中不可或缺的一部分，掌握它将帮助你创建更加美观和高效的网页。
在接下来的课程中，我们将深入学习 CSS 的各种高级特性和技巧，包括布局、动画、响应式设计等。继续探索，你会发现 CSS 的无限可能！